Step 4 - Show the bloom effect

In this step you first apply the bloom effect to the headlights of the car. Then you show the bloom effect by blending it on top of the normally rendered scene.

In the next step you fine-tune the effect by applying it three more times using the materials you created in the previous step.

Apply the bloom

To apply the bloom:

Apply the first pass of the bloom effect:
1. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Horizontal Bloom, and in the Properties add and set:
  - Texture0 to Bloom Threshold
  - Material to GaussianBloom07Material
  - Blur Direction X property field to 1
    This way you apply the blur effect in the horizontal direction.
  - Blur Radius to 2
    This way you set the strength of the blur effect.
  - Intensity to 1,5
    This way you set the intensity of the bloom effect.
  You use this render pass to draw the Bloom Threshold render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the horizontal direction.
2. In the Library in the Render Bloom render pass create a Composition Target Render Pass, name it Horizontal Bloom 1, and drag the Blit Horizontal Bloom to the Horizontal Bloom 1 render pass.
  You use the Horizontal Bloom 1 render pass to render the Blit Horizontal Bloom render pass to a composition target. Later in this section you use the composition target as input to a render pass which applies the bloom effect with Gaussian blur in the vertical direction.
3. In the Library select the Horizontal Bloom 1 render pass, in the Properties add the Resolution Divisor property, and set it to 2.
  This way you divide by 2 the resolution of the composition target to which the render pass renders itself.
  You reduce the resolution of the composition target to improve performance.
4. In the Library duplicate the Horizontal Bloom 1 render pass and rename the new render pass to Vertical Bloom 1.
  You use this render pass to apply the blur in the vertical direction.
5. In the Library select the Vertical Bloom 1 > Blit Horizontal Bloom render pass and in the Properties set:
  - Name to Blit Vertical Bloom
  - Texture0 to Horizontal Bloom 1
  - Blur Direction X property field to 0
  - Blur Direction Y property field to 0,5
    This way you apply the blur effect in the vertical direction.
    You use the value 0,5 because you divided the resolution of the Horizontal Bloom 1 render pass by 2. This way you create a symmetrical blur effect.
  You use this render pass to draw the Horizontal Bloom 1 render pass using the GaussianBloom07Material material to apply to the car node the bloom effect with Gaussian blur in the vertical direction.
Create a material which supports combining several passes of the bloom effect:
1. In the Library > Materials and Textures > Material Types duplicate the DefaultBlit material type and rename the new material type to Combine.
2. In the Library in the Combine material type double-click the Fragment Shader to open it in the Shader Source Editor.
3. In the Shader Source Editor replace the content of the fragment shader file with the shader code in this step and click Save.
  This fragment shader supports rendering four textures and defining a multiplication factor for each of them.
```
// Define the four textures to render.
uniform sampler2D Texture0;
uniform sampler2D Texture1;
uniform sampler2D Texture2;
uniform sampler2D Texture3;

// Define multipliers for the four textures.
uniform lowp float Pass1Multiplier;
uniform lowp float Pass2Multiplier;
uniform lowp float Pass3Multiplier;
uniform lowp float Pass4Multiplier;

varying mediump vec2 vTexCoord;

void main()
{
    precision lowp float;
    
    vec4 color = texture2D(Texture0, vTexCoord)*Pass1Multiplier;
    color += texture2D(Texture1, vTexCoord)*Pass2Multiplier;
    color += texture2D(Texture2, vTexCoord)*Pass3Multiplier;
    color += texture2D(Texture3, vTexCoord)*Pass4Multiplier;
    
    gl_FragColor.rgba = color;
}
```
4. In the Library select the Combine material type and in the Properties click Sync with Uniforms to create and add the properties you defined in the shader to this material type and the materials that use it.
5. In the Create Property Type dialog click Yes to create the custom property type Pass1Multiplier and in the Property Type Editor window set:
  - Display Name to Pass 1 Multiplier
  - Upper Bound to 10
  - Default Value to 1
6. Repeat the previous step to create these custom property types:
  - For Pass2Multiplier set Display Name to Pass 2 Multiplier
  - For Pass3Multiplier set Display Name to Pass 3 Multiplier
  - For Pass4Multiplier set Display Name to Pass 4 Multiplier
  For each property type set the Upper Bound to 10 and the Default Value to 1.
7. In the Library press Alt and right-click the Combine material type, select Material, and name the material CombineMaterial.
In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Blit Render Pass, name it Blit Combined Bloom, and in the Properties set:
- Texture0 to Vertical Bloom 1
- Material to CombineMaterial
You use this render pass to draw the Vertical Bloom 1 render pass to the screen using the CombineMaterial.
In the next step of this tutorial you apply the bloom effect three more times and use this render pass to combine the outputs of all four passes.

Show the car with the headlights turned on

In this section you create the render passes and material you need to show the car with the headlights turned on.

To show the car with the headlights turned on:

Create a material which supports blending the bloom effect with the normally rendered scene:
1. In the Library > Materials and Textures > Material Types duplicate the DefaultBlit material type and rename the new material type to BlitBloom.
2. In the Library in the BlitBloom material type double-click the Fragment Shader, in the Shader Source Editor replace the content of the fragment shader file with the shader code in this step, and click Save.
  This fragment shader implements setting the color of the bloom effect.
```
uniform sampler2D Texture0;
// Defines the color with which to multiply the texture.
uniform lowp vec4 PostProcessingColorMultiply;

varying mediump vec2 vTexCoord;

void main()
{
    precision lowp float;
    
    vec4 color = texture2D(Texture0, vTexCoord);
    color *= PostProcessingColorMultiply;
    gl_FragColor = color;
}
```
3. In the Library select the BlitBloom material type and in the Properties click Sync with Uniforms to create and add the PostProcessingColorMultiply property you defined in the shader to this material type and the materials that use it.
4. In the Create Property Type dialog click Yes to create the custom property type PostProcessingColorMultiply, in the Property Type Editor window set the Display Name property to Post-processing Color Multiply, and click Save.
  You use this property type to set the color of the bloom effect.
5. In the Library press Alt and right-click the BlitBloom material type, select Material, name the material BlitBloomMaterial, and in the Properties set the Blend Mode to Additive.
  You set the Blend Mode to Additive because to show the bloom effect you want to add its pixel values to those of the normally rendered scene.
Show the scene with the bloom effect:
1. In the Library > Rendering > Render Passes > Bloom > Render Bloom create a Composition Target Render Pass, name it Bloom Out, and drag the Blit Combined Bloom render pass to the Bloom Out render pass.
2. In the Library in the Bloom render pass create a Blit Render Pass, name it Show Bloom, and in the Properties add and set:
  - Texture0 to Bloom Out
  - Material to BlitBloomMaterial
  - Post-processing Color Multiply Lightness (L) property field to 220
    This way you set the brightness of the bloom effect.
  You use this render pass to draw the Bloom Out render pass using the BlitBloomMaterial material to show the bloom effect.

< PREVIOUS STEP

NEXT STEP >

Step 4 - Show the bloom effect

Apply the bloom

Show the car with the headlights turned on

See also